<template>
	<view class="my-collection-set">
		<view class="he">
			<view class="font-18 font-600 col-000-8">
				{{$t('mine.MyCollectionSet')}}
			</view>
			<view class="font-14 col-000-4" @click="doManage">
				{{$t('mine.manage')}}
				<uni-icons color="rgba(0, 0, 0, 0.40)" type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="collect-list">
			<view class="empty " v-if="collectSetList.length == 0" @click="createCollect">
				<uni-icons class="ico" color="rgba(0, 0, 0, 0.40)" type="plusempty" size="20"></uni-icons>
				<view class="font-14 col-000-4 text-center">
					{{$t('mine.createCollection')}}
				</view>
			</view>
			<view class="item" v-for="(item, index) in collectSetList" :key="index" :style="{background: item.background_color }" @click="doDetail(item.id)">
	
				<view class="title font-14 col-000-8 font-500">
					{{item.collection_name}}
				</view>
				<view class="num font-11 col-000-4">
					{{item.pattern_count}}{{$t('mine.pattern')}}
				</view>
			</view>
		</view>
		<!-- 添加收藏集 -->
		<addColecton ref="ref_addColecton" @addSuccess="resetSearch" />
	</view>
</template>

<script>
	import addColecton from '@/pages/ucenter/com-add-colection/index.vue'
	import collectionApi from '@/api/collection.js';
	export default {
		components: {
			addColecton
		},
		data() {
			return {
				params: {
					page: 1,
					limit: 20,
				},
				collectSetList: []
			}
		},
		created() {
			// console.log('collectionApi', collectionApi)
			this.getCollectList()
		},
		methods: {
			resetSearch() {
				console.log('reset')
				this.collectSetList = [];
				this.params.page = 1;
				this.params.limit = 20;
				this.getCollectList()
			},
			getCollectList() {
				collectionApi.getCollectionList(this.params).then(res => {
					this.collectSetList = res.data.list;
				})
			},
			createCollect() {
				this.$refs.ref_addColecton.open()
			},
			doManage() {
				uni.navigateTo({
					url: '/pages/collection/index'
				})
			},
			doDetail(id) {
				uni.navigateTo({
					url: '/pages/collection/detail?collection_id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-collection-set {
		width: 100%;
		margin-top: 120rpx;
		.he {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.collect-list {
			width: 100%;
			margin: 40rpx auto 0;
			.empty {
				width: 260rpx;
				height: 200rpx;
				border-radius: 16rpx;
				border: 1px dashed rgba(0,0,0,0.4);
				.ico {
					display: block;
					margin: 48rpx auto 16rpx;
				}
			}
			display: flex;
			overflow-y: scroll;
			.item {
				width: 260rpx;
				min-width: 260rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
				padding: 24rpx;
				.num {
					margin-top: 8rpx;
				}
			}
		}
	}
</style>